<template>
  <div
    class="classBox"
    :class="[enter && !item.active ? 'enter' : '', item.active ? 'active' : '']"
    @click="click"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
    @contextmenu.prevent="contextmenu(item)"
  >
    <span>{{ item.className }}</span>
    <!-- <span>(60)</span> -->
  </div>
</template>

<script>

export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      property: 'value',
      enter: false
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    click() {
      this.$emit('clickClass')
      this.item.active = !this.item.active
    },
    mouseenter() {
      // console.log('鼠标进入')
      this.enter = true
    },
    mouseleave() {
      // console.log('鼠标离开')
      this.enter = false
    },
    contextmenu() {
      this.$emit('contextmenu')
      console.log('this.item', this.item)
      this.item.active = true
    }
  }
}
</script>

<style lang="scss" scoped>
.classBox{
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 2px;
  padding-left: 20px;
  cursor: pointer;
}
.active{
  background-color: #ffe48d;
}
.enter{
  background-color: #eaf2ff;
}
</style>
